<template >
  <div class="all">
    <!-- 页头 -->
    <el-container class="allContainer">
      <el-header class="head">
        <div class="divHead"></div>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <div>
                <div class="topFont">访客信息登记</div>
              </div>
            </div>
          </el-col>
          <div class="divBtn">
            <el-button size="mini" type="success" icon="el-icon-edit" @click="addDialog = true">新增</el-button>
            <!---------------------------------- 新增 ---------------------------------->
            <el-dialog title="访客新增" :visible.sync="addDialog" @close="closeDialogAddgsVisible">
              <div class="dialogAll">
                <div class="left">
                  <div class="leftFont">访客基本信息:</div>
                  <div class="leftForm">
                    <div class="addVisitors">
                      <el-form ref="addForm" label-width="90px" size="mini" :model="addForm">
                        <el-form-item label="访客姓名:" :required="true" style="width: 280px" prop="visitorName">
                          <el-input v-model="addForm.visitorName" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="联系方式:" :required="true" style="width: 280px" prop="visitorTel">
                          <el-input v-model="addForm.visitorTel" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="访客性别:" :required="true" style="width: 280px" prop="visitorSex">
                          <el-input v-model="addForm.visitorSex" placeholder="请选择访客性别">
                          </el-input>
                        </el-form-item>
                        <el-form-item label="访客学历:" :required="true" style="width: 280px" prop="visitorEdu">
                          <el-input v-model="addForm.visitorEdu" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="访客微信:" :required="true" style="width: 280px" prop="visitorVx">
                          <el-input v-model="addForm.visitorVx" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="人脸照片" :required="true" style="width: 280px">
                          <div style="width: 100px; height: 100px">
                            <el-image style="width: 100px; height: 100px" :src="addForm.visitorImg"></el-image>
                          </div>
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </div>

                <div class="right">
                  <div class="rightFont">造访单位信息:</div>
                  <div class="rightForm">
                    <div class="carForm">
                      <el-form label-width="100px" size="mini" :model="addForm">
                        <el-form-item label="造访类型:" prop="visitId" :required="true" style="width: 240px; float: left">
                          <el-select v-model="addForm.visitId" placeholder="请选择造访类型" style="width: 100%">
                            <el-option v-for="item in visitList" :key="item.visitId" :label="item.visitName"
                              :value="item.visitId">
                            </el-option>
                          </el-select>
                        </el-form-item>

                        <el-form-item label="单位名称:" prop="enterpriseId" :required="true"
                          style="width: 240px; float: left; margin-left: 60px">
                          <el-select v-model="addForm.enterpriseName" placeholder="请选择造访单位" style="width: 100%"
                            @change="byEnterpriseName">
                            <el-option v-for="item in contractList" :key="item.enterpriseName"
                              :label="item.enterpriseName" :value="item.enterpriseName">
                            </el-option>
                          </el-select>
                        </el-form-item>

                        <el-form-item label="负责人姓名:" :required="true" style="width: 240px; float: left">
                          <el-input v-model="addForm.staffsName" placeholder="请输入内容" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="联系方式:" :required="true"
                          style="width: 240px; float: left; margin-left: 60px">
                          <el-input v-model="addForm.staffsTel" placeholder="请输入内容" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="所属楼宇:" :required="true" style="width: 240px; float: left">
                          <el-input v-model="addForm.buildingName" placeholder="请输入内容" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="房间名称:" :required="true"
                          style="width: 240px; float: left; margin-left: 60px">
                          <el-input v-model="addForm.roomName" placeholder="请输入内容" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="开始时间" :required="true" style="width: 280px; float: left" :disabled="true"
                          format="yyyy-MM-dd HH:mm:ss" prop="accessIn">
                          <el-date-picker v-model="addForm.accessIn" type="datetime" placeholder="造访时间">
                          </el-date-picker>
                        </el-form-item>
                        <el-form-item label="结束时间" :required="true" style="width: 280px" prop="accessOut">
                          <el-date-picker v-model="addForm.accessOut" type="datetime" placeholder="造访结束时间">
                          </el-date-picker>
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </div>
              </div>
              <div slot="footer" style="text-align: center">
                <el-button @click="addDialog = false">取 消</el-button>
                <el-button type="primary" @click="saveVisitors">确 定</el-button>
              </div>
            </el-dialog>
            <!---------------------------------- 详情 ---------------------------------->
            <el-dialog title="访客详情" :visible.sync="updateDialog" @close="closeDialogAddgsVisible">
              <div class="dialogAll">
                <div class="left">
                  <div class="leftFont">访客基本信息:</div>
                  <div class="leftForm">
                    <div class="addVisitors">
                      <el-form ref="addForm" label-width="90px" size="mini" :model="addForm">
                        <el-form-item label="访客姓名:" :required="true" style="width: 280px" prop="visitorName">
                          <el-input v-model="addForm.visitorName" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="联系方式:" :required="true" style="width: 280px" prop="visitorTel">
                          <el-input v-model="addForm.visitorTel" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="访客性别:" :required="true" style="width: 280px" prop="visitorSex">
                          <el-input v-model="addForm.visitorSex" placeholder="请选择访客性别">
                          </el-input>
                        </el-form-item>
                        <el-form-item label="访客学历:" :required="true" style="width: 280px" prop="visitorEdu">
                          <el-input v-model="addForm.visitorEdu" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="访客微信:" :required="true" style="width: 280px" prop="visitorVx">
                          <el-input v-model="addForm.visitorVx" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="人脸照片" :required="true" style="width: 280px">
                          <div style="width: 100px; height: 100px">
                            <el-image style="width: 100px; height: 100px" :src="addForm.visitorImg"></el-image>
                          </div>
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </div>

                <div class="right">
                  <div class="rightFont">造访单位信息:</div>
                  <div class="rightForm">
                    <div class="carForm">
                      <el-form label-width="100px" size="mini" :model="addForm">
                        <el-form-item label="造访类型:" prop="visitId" :required="true" style="width: 240px; float: left">
                          <el-select v-model="addForm.visitId" placeholder="请选择造访类型" style="width: 100%">
                            <el-option v-for="item in visitList" :key="item.visitId" :label="item.visitName"
                              :value="item.visitId">
                            </el-option>
                          </el-select>
                        </el-form-item>

                        <el-form-item label="单位名称:" prop="enterpriseId" :required="true"
                          style="width: 240px; float: left; margin-left: 60px">
                          <el-select v-model="addForm.enterpriseName" placeholder="请选择造访单位" style="width: 100%"
                            @change="byEnterpriseName">
                            <el-option v-for="item in contractList" :key="item.enterpriseName"
                              :label="item.enterpriseName" :value="item.enterpriseName">
                            </el-option>
                          </el-select>
                        </el-form-item>

                        <el-form-item label="负责人姓名:" :required="true" style="width: 240px; float: left">
                          <el-input v-model="addForm.staffsName" placeholder="请输入内容" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="联系方式:" :required="true"
                          style="width: 240px; float: left; margin-left: 60px">
                          <el-input v-model="addForm.staffsTel" placeholder="请输入内容" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="所属楼宇:" :required="true" style="width: 240px; float: left">
                          <el-input v-model="addForm.buildingName" placeholder="请输入内容" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="房间名称:" :required="true"
                          style="width: 240px; float: left; margin-left: 60px">
                          <el-input v-model="addForm.roomName" placeholder="请输入内容" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="开始时间" :required="true" style="width: 280px; float: left" :disabled="true"
                          format="yyyy-MM-dd HH:mm:ss" prop="accessIn">
                          <el-date-picker v-model="addForm.accessIn" type="datetime" placeholder="造访时间">
                          </el-date-picker>
                        </el-form-item>
                        <el-form-item label="结束时间" :required="true" style="width: 280px" prop="accessOut">
                          <el-date-picker v-model="addForm.accessOut" type="datetime" placeholder="造访结束时间">
                          </el-date-picker>
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </div>
              </div>
              <div slot="footer" style="text-align: center">
                <el-button @click="updateDialog = false">取 消</el-button>
                <el-button type="primary" @click="updateVisitors">确 定</el-button>
              </div>
            </el-dialog>
            <!---------------------------------- 批量删 ---------------------------------->
            <el-button slot="reference" size="mini" type="danger" icon="el-icon-delete" @click="batchDelect">批量删除
            </el-button>
          </div>
        </el-row>
      </el-header>
      <el-main class="bottomMain">
        <div class="divMain">
          <template>
            <!---------------------------------- 模糊查询 ---------------------------------->
            <div class="mainTop">
              <!---------------------------------- 访客模糊查询 ---------------------------------->
              <div class="divInputAll">
                <!-- 输入框 -->
                <div class="divInput">
                  <div class="inputFont">访客姓名:</div>
                  <div style="float: left">
                    <el-input size="mini" placeholder="请输入访客姓名" v-model="queryVisitor.visitorName">
                    </el-input>
                  </div>
                </div>
                <div class="divInput">
                  <div class="inputFont">访客类型:</div>
                  <div style="float: left">
                    <el-input size="mini" placeholder="请输入访客类型" v-model="queryVisitor.visitName">
                    </el-input>
                  </div>
                </div>
                <div class="divInput">
                  <div class="inputFont">联系方式:</div>
                  <div style="float: left">
                    <el-input size="mini" placeholder="请输入内容" v-model="queryVisitor.visitorTel">
                    </el-input>
                  </div>
                </div>
                <div class="likeBtn">
                  <el-button size="mini" type="success" icon="el-icon-search" @click="loadVisitors">查询</el-button>
                  <el-button size="mini" plain @click="loadVisitorsNull">重置</el-button>
                </div>
              </div>
            </div>
          </template>
          <!------------------------------------ 查所有,表格 -------------------------------->
          <div class="divSelAll">
            <template>
              <el-table :data="visitorList" border @selection-change="handleSelectChange"
                style="width: 100%; font-size: xx-small; margin: auto" :row-style="{ height: '22px' }"
                :cell-style="{ padding: '1px' }">
                <el-table-column fixed type="selection" prop="visitorId" width="45">
                </el-table-column>
                <el-table-column fixed prop="visitorName" label="访客姓名" width="120">
                </el-table-column>
                <el-table-column prop="visitorTel" label="联系方式" width="130">
                </el-table-column>
                <el-table-column prop="visitName" label="造访类型" width="100">
                </el-table-column>
                <el-table-column prop="enterpriseName" label="造访单位" width="200">
                </el-table-column>
                <el-table-column prop="carNum" label="车牌号码" width="160">
                </el-table-column>
                <el-table-column prop="accessOut" label="造访结束时间" width="250">
                </el-table-column>

                <el-table-column label="操作" width="155">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleEdit(scope.row.visitorId)">详情</el-button>
                    <el-button type="text" size="small" @click="handleDelete(scope.row.visitorId)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>

          <!-- ----------------------------------分页,current-page当前第几页,page-size一页显示几条数据------------------------------>
          <div class="divPage">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="queryVisitor.currentPage" :page-sizes="[8, 10, 50, 100]" :page-size="queryVisitor.pageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="page.total">
            </el-pagination>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { set } from "vue";

export default {
  data() {
    return {
      visitList: {},
      contractList: {},
      visitorList: [], //表格数据
      sels: [], //当前选框选中的值
      addDialog: false,
      updateDialog: false,
      addForm: {
        enterpriseName: "",
      },
      updateForm: {},
      page: {
        total: 0, //总条数
      },
      queryVisitor: {
        currentPage: 1, //当前页
        pageSize: 8, //每页显示的条数
        visitorName: "",
        visitorTel: "",
        visitName: "",
      },
      listId: [],
    };
  },
  methods: {
    loadVisits() {
      this.$axios.get("visits").then((res) => {
        this.visitList = res.data.data.visitList;
      });
    },
    loadVisitors() {
      this.$axios.post("visitors/queryAll", this.queryVisitor).then((res) => {
        this.visitorList = res.data.data.visitorList;
        this.page.total = res.data.data.total;
      });
    },
    loadenterpriseNames() {
      this.$axios.get("enterprise").then((res) => {
        this.contractList = res.data.data.contractList;
      });
    },
    byEnterpriseName() {
      this.$axios
        .post("enterprise/selByNameEnterprise", this.addForm)
        .then((res) => {
          this.addForm = res.data.data.enterpriseVo;
          this.loadVisitors();
        });
    },

    saveVisitors() {
      this.$axios.post("visitors/", this.addForm).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("添加成功");
          this.addDialog = false; //关闭dialog
          // this.$refs.addForm.resetFields(); //重置form
          this.loadVisitors();

        }
      });
    },
    /**
     *关闭或取消模态框，清空值
     */
    closeDialogAddgsVisible() {
      this.addForm = {
        //初始化addForm中的值
      };
    },

    byVisitorName() {
      this.$axios
        .post("visitors/selByNameVisitor", this.visitorFormAdd)
        .then((res) => {
          this.visitorFormAdd = res.data.data.vistorVo;
        });
    },

    //每一页显示的条数变化时
    handleSizeChange(val) {
      this.queryVisitor.pageSize = val;
      this.loadVisitors();
    },
    //当前页数变化时
    handleCurrentChange(val) {
      this.queryVisitor.currentPage = val;
      this.loadVisitors();
    },
    //单个删除方法
    handleDelete(id) {
      this.$axios.delete("visitors/" + id).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("删除成功");
          this.loadVisitors();
        }
      });
    },

    //修改方法
    handleEdit(id) {
      this.$axios.get("visitors/" + id).then((res) => {
        this.updateDialog = true; //显示修改dialog
        this.addForm = res.data.data.vistorVo;
      });
    },
    updateVisitors() {
      this.$axios.put("visitors/", this.addForm).then(res => {
        if (res.data.code == 200) {
          this.$message.success("修改成功");
          this.updateDialog = false;
          // this.$refs.updateForm.resetFields();//重置

          this.loadVisitors();
        }
      });
    },
    closeDialogAddgsDesc() {
      this.addForm = {//初始化visitorForm中的值
      }
      this.loadVisitors();
    },
    //批量删除方法
    batchDelect() {
      const visitorIds = new Set();
      for (let i = 0; i < this.listId.length; i++) {
        visitorIds.add(this.listId[i].visitorId);
      }
      this.$axios.post("visitors/deleteBatch", visitorIds).then((res) => {
        if (res.data.code == 200) {
          alert("确定删除？");
        }
        this.loadVisitors();
      });
    },
    handleSelectChange(val) {
      this.listId = val;
    },
    loadVisitorsNull() {
      this.queryVisitor.visitorName = "";
      this.queryVisitor.visitorTel = "";
      this.queryVisitor.visitName = "";
      this.loadVisitors();
    },
  },
  mounted() {
    this.loadVisitors();
    this.loadVisits();
    this.loadenterpriseNames();
  },
};
</script>
<style >
.all {
  width: 100%;
  height: 700px;
  background-color: rgb(240, 242, 245);
}

.allContainer {
  width: 98%;
  margin: auto;
}

.head {
  background-color: white;
  width: 100%;
  height: 10px;
  line-height: 60px;
  margin: auto;
  border-radius: 10px;
  margin-top: 5px;
}

.divHead {
  background-color: cornflowerblue;
  width: 7px;
  height: 50%;
  float: left;
  margin-top: 15px;
  border-radius: 2px;
  margin-left: 8px;
}

.topFont {
  float: left;
  margin-left: 18px;
  font-size: 14px;
  font-weight: 900;
}

.divBtn {
  float: right;
  margin-right: 10px;
}

.bottomMain {
  border-radius: 8px;
  width: 100%;
  height: 620px;
  margin: auto;
  margin-top: 5px;
}

.divMain {
  width: 100%;
  height: 100%;
}

.mainTop {
  width: 100%;
  height: 13%;
  margin: auto;
  border: 1px solid darkgray;
  border-radius: 5px;
}

.divInputAll {
  background-color: white;
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin: auto;
  border-radius: 10px;
  margin-top: 5px;
}

.divInput {
  border: 0px solid red;
  width: 23%;
  height: 100%;
  line-height: 60px;
  margin-left: 30px;
  float: left;
}

.divSelect {
  border: 0px solid red;
  width: 24.9%;
  height: 100%;
  line-height: 60px;
  margin-left: 30px;
  float: left;
}

.likeBtn {
  float: right;
  margin-right: 12px;
  line-height: 60px;
}

.inputFont {
  float: left;
  font-size: 2px;
}

.optionFont {
  float: right;
  color: #8492a6;
  font-size: xx-small;
}

.divSelAll {
  width: 100%;
  height: 75%;
  margin-top: 8px;
  line-height: 20px;
}

.divPage {
  width: 100%;
  height: 2%;
  margin-top: 20px;
  line-height: 10px;
}

.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 54%;
  left: 57.5%;
  transform: translate(-50%, -50%);
  height: 700px;
  width: 1135px;
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}

.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}

.dialogAll {
  border: 0px solid red;
  width: 98%;
  height: 105%;
  margin: auto;
  margin-top: -30px;
}

.left {
  border: 0px solid red;
  width: 35%;
  height: 100%;
  float: left;
}

.right {
  border: 0px solid red;
  width: 63%;
  height: 100%;
  float: right;
}

.leftFont,
.rightFont {
  border: 0px solid red;
  width: 90%;
  height: 8%;
  line-height: 20px;
  text-align: left;
  font-weight: 1000;
  font-family: "微软楷体";
  margin-left: 10px;
}

.leftForm,
.rightForm {
  border: 2px dashed #8492a6;
  border-radius: 10px;
  width: 99%;
  height: 94%;
}

.addVisitors,
.carForm {
  border: 0px solid red;
  width: 90%;
  height: 95%;
  margin: auto;
  margin-top: 60px;
  margin-left: 35px;
}
</style>
